<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background:#000000;
			}
			.stage{
				width:100px;
				height:100px;
				margin:200px auto;
			    -webkit-perspective: 800px;
			    -moz-perspective: 800px;
			    -ms-perspective: 800px;
			    -o-perspective: 800px;
			    perspective: 800px;
			    
			    -webkit-perspective-origin:50% -100% ;
			    -moz-perspective-origin:50% -100% ;
			    -ms-perspective-origin:50% -100% ;
			    -o-perspective-origin:50% -100% ;
				perspective-origin: 50% -100%;
				
			}
			.box{
				position: relative;
				width:120px;
				height:180px;
				transform-style: preserve-3d;
				-webkit-transition: all 1s linear;
				-moz-transition: all 1s linear;
				-ms-transition: all 1s linear;
				-o-transition: all 1s linear;
				transition: all 1s linear;
				
			}
			.box div{
				position: absolute;
				width:120px;
				height:180px;
				/*图片倒影还未学*/
				-webkit-box-reflect: below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.5));
			
			}
			.box div img{
				width:120px;
				height:180px;
				border:1px solid pink;
				box-shadow: 0px 0px 5px pink;
			}
			
			.box div:nth-child(1){
				-webkit-transform:rotateY(0deg) translateZ(200px);
				-moz-transform:rotateY(0deg) translateZ(200px);
				-ms-transform:rotateY(0deg) translateZ(200px);
				-o-transform:rotateY(0deg) translateZ(200px);
				transform:rotateY(0deg) translateZ(200px);
			}
			.box div:nth-child(2){
				-webkit-transform: rotateY(40deg) translateZ(200px);
				-moz-transform: rotateY(40deg) translateZ(200px);
				-ms-transform: rotateY(40deg) translateZ(200px);
				-o-transform: rotateY(40deg) translateZ(200px);
				transform:rotateY(40deg) translateZ(200px);
			}
			.box div:nth-child(3){
				-webkit-transform: rotateY(80deg) translateZ(200px);
				-moz-transform: rotateY(80deg) translateZ(200px);
				-ms-transform: rotateY(80deg) translateZ(200px);
				-o-transform: rotateY(80deg) translateZ(200px);
				transform:rotateY(80deg) translateZ(200px);
			}
			.box div:nth-child(4){
				-webkit-transform: rotateY(120deg) translateZ(200px);
				-moz-transform: rotateY(120deg) translateZ(200px);
				-ms-transform: rotateY(120deg) translateZ(200px);
				-o-transform: rotateY(120deg) translateZ(200px);
				transform:rotateY(120deg) translateZ(200px);
			}
			.box div:nth-child(5){
				-webkit-transform: rotateY(160deg) translateZ(200px);
				-moz-transform: rotateY(160deg) translateZ(200px);
				-ms-transform: rotateY(160deg) translateZ(200px);
				-o-transform: rotateY(160deg) translateZ(200px);
				transform:rotateY(160deg) translateZ(200px);
			}
			.box div:nth-child(6){
				-webkit-transform: rotateY(200deg) translateZ(200px);
				-moz-transform: rotateY(200deg) translateZ(200px);
				-ms-transform: rotateY(200deg) translateZ(200px);
				-o-transform: rotateY(200deg) translateZ(200px);
				transform:rotateY(200deg) translateZ(200px);
			}
			.box div:nth-child(7){
				-webkit-transform: rotateY(240deg) translateZ(200px);
				-moz-transform: rotateY(240deg) translateZ(200px);
				-ms-transform: rotateY(240deg) translateZ(200px);
				-o-transform: rotateY(240deg) translateZ(200px);
				transform:rotateY(240deg) translateZ(200px);
			}
			.box div:nth-child(8){
				-webkit-transform: rotateY(280deg) translateZ(200px);
				-moz-transform: rotateY(280deg) translateZ(200px);
				-ms-transform: rotateY(280deg) translateZ(200px);
				-o-transform: rotateY(280deg) translateZ(200px);
				transform:rotateY(280deg) translateZ(200px);
			}
			.box div:nth-child(9){
				-webkit-transform: rotateY(320deg) translateZ(200px);
				-moz-transform: rotateY(320deg) translateZ(200px);
				-ms-transform: rotateY(320deg) translateZ(200px);
				-o-transform: rotateY(320deg) translateZ(200px);
				transform:rotateY(320deg) translateZ(200px);
			}
			
		</style>
		<script type="text/javascript">
			window.onload=function(){
				
				var oBox=document.getElementById("box");
				var aDiv=oBox.getElementsByTagName("div");
				for (var i = 0; i < aDiv.length; i++) {
					aDiv[i].index=i;
					aDiv[i].onclick=function(){
						oBox.style.transform="rotateY("+-40*(this.index)+"deg)";
					}
				}
			
			}
			
		</script>
	</head>
	<body>
		<div class="stage">
			<div class="box" id="box">
				<div>
					<img src="img/11.jpeg"/>
				</div>
				<div>
					<img src="img/12.jpeg"/>
				</div>
				<div>
					<img src="img/13.jpeg"/>
				</div>
				<div>
					<img src="img/14.jpeg"/>
				</div>
				<div>
					<img src="img/15.jpeg"/>
				</div>
				<div>
					<img src="img/16.jpeg"/>
				</div>
				<div>
					<img src="img/17.jpeg"/>
				</div>
				<div>
					<img src="img/18.jpeg"/>
				</div>
				<div>
					<img src="img/20.jpeg"/>
				</div>
			</div>
		</div>
	</body>
</html>
